<template>
  <div class="channel-edit-container">
    <!-- 我的频道 -->
    <van-cell center :border="false">
      <div slot="title">
        <span class="channel-group-title">我的频道</span>
        <span class="channel-group-label">点击进入频道</span>
      </div>
      <van-button 
        class="edit-btn" 
        type="danger" 
        plain 
        round
        @click="isEdit = !isEdit"
      >{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <!-- 
      :class="{active: active === index}"
      也可以
      :class="{'active': active === index}"
     -->
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(channel,index) in userChannels"
        :class="{active: active === index}"
        :icon="(isEdit && index !== 0) ? 'close': ''"
        :key="index"
        :text="channel.name"
        @click="onUserChannelClick(channel,index)"
      />
    </van-grid>

    <!-- 频道编辑 -->
    <van-cell center>
      <div slot="title">
        <span class="channel-group-title">频道推荐</span>
        <span class="channel-group-label">点击添加频道</span>
      </div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        v-for="(channel,index) in recommendChannels"
        :key="index"
        :text="channel.name"
        @click="onAdd(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
import {getAllChannelsApi , resetUserChannelsApi, deleteUserChannelApi} from '@/api/channel';
import {mapState} from 'vuex';
import {setItem} from '@/utils/storage';
import {CHANNELS_KEY} from '@/utils/const';

export default {
  name: "ChannelEdit",
  components: {},
  props: {
    // "user-channels": {
    // }
    userChannels: {
      type: Array,
      required: true,
      default() {
        return [];
      }
    },
    // 选中当前频道高亮状态
    active: 0
  },
  data() {
    return {
      // 所有频道
      allChannels: [],
      // 控制编辑
      isEdit: false,
    };
  },
  computed: {
    ...mapState(['user']),
    // 计算属性会观测内部依赖数据的变化而重新求值
    // 推荐频道是计算得来的
    recommendChannels() {
      // filter方法查找满足条件的所有元素
      return this.allChannels.filter(channel => {
        // find方法查找满足条件的单个元素
        return !this.userChannels.find(userChannel => {
          // 找到满足该条件的元素
          return userChannel.id === channel.id;
        })
      }) 

      // const channels = [];
      // this.allchannels.forEach((channel) => {
      //   const ret = this.mychannel.find((mychanne) => {
      //     return mychanne.id === channel.id;
      //   });
      //   // 如果该频道不在我的频道 则添加进来
      //   if (!ret) {
      //     channels.push(channel);
      //   }
      // });
      // return channels;

      // const arr = [];
      // this.allChannels.forEach(channel => {
      //   const flag = false; 
      //   for (let i = 0; i < this.userChannels.length; i++ ) {
      //     if (this.userChannels[i].id === channel.id) {
      //       // 所有频道中的频道项属于用户频道
      //       flag = true;
      //       break;
      //     }
      //   }
      //   if (!flag) {
      //     arr.push(channel)
      //   }
      // }) 
      // return arr;

    }
  },
  watch: {},
  methods: {
    async getAllChannels() {
      const {data} = await getAllChannelsApi();
      this.allChannels = data.data.channels;
    },
    // 点击频道推荐的item
    onAdd(channel) {
      this.userChannels.push(channel);
      // 数据持久化
      // 如果未登录，存储到本地；如果已经登录，更新到线上。
      if (this.user) {
        // 登录了
        this.resetUserChannels(channel)
      } else {
        // 没有登录
        setItem(CHANNELS_KEY,this.userChannels);
      }
    },
    // 添加频道列表
    async resetUserChannels(channel) {
      try {
        const {data} = await resetUserChannelsApi({
          channels: [
            {id: channel.id, seq: this.userChannels.length }
          ]
        })
      } catch (error) {
        this.$toast("添加操作失败")
      }
    },
    // 点击我的频道的item
    onUserChannelClick(channel,index) {
      if (this.isEdit && index !== 0) {
        // 如果是在编辑状态，点击的是要删除的
        this.deleteChannel(channel,index)
      } else {
        // 不是编辑状态要进入这个频道
        this.switchChannel(index)
      }
    },
    // 删除频道
    async deleteChannel(channel,index) {
      if (index <= this.active) {
        // 更新激活频道的索引
        this.$emit('updateActive',this.active - 1);
      } 
      this.userChannels.splice(index,1);

      // 数据持久化
      // 如果未登录，存储到本地；如果已经登录，更新到线上。
      try {
        if (this.user) {
          // 已登录 更新到服务器
          const {data} = await deleteUserChannels(channel.id);
          console.log("输出删除频道",data);
        } else {
          // 已登录 更新到本地
          setItem(CHANNELS_KEY, this.userChannels);
          // 直接覆盖
        }
      } catch (err) {
        this.$toast('删除操作失败')
      }
    },
    // 切换频道
    switchChannel(index) {
      this.$emit("popupViewClose",index)
    }
  },
  created() {
    // 获取所有频道列表
    this.getAllChannels() 
  },
  mounted() {},
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
.channel-edit-container {
  padding-top: 54px;

  .edit-btn {
    width: 60px;
    height: 30px;
  }

  .channel-group-title {
    font-size: 16px;
    color: #333;
  }

  .channel-group-label {
    margin-left: 10px;
    font-size: 10px;
    color: #999;
  }

  .grid-item {
    width: 80px;
    height: 43px; 

    /deep/ .van-grid-item__icon {
      // width: 14px;
      // height: 14px;
      // 设置图标大小，用font-size设置
      font-size: 18px;
      position: absolute;
      right: -8px;
      top: -8px;
      color: #ccc;
    }

    /deep/ .van-grid-item__content {
      background-color: #f4f5f6;

      .van-grid-item__text {
        font-size: 14px;
        color: #222;
        // 点击编辑，出现close按钮的时候，有margin-top,设置为0，则不用掉下来了。
        margin-top: 0;
      }
    } 
  }
  // 高亮的样式
  .active {
    /deep/ .van-grid-item__text {
      color:red !important;
    }
  }
}
</style>